<template>
	<view class="video-box">
		<video objectFit="fill" :show-center-play-btn="false" :autoplay="autoplay" id="myvideo" class="videoplay" :controls="false" :src="ip+'/video/'+videoitem.src" loop="true"
			@click="clicker" @timeupdate="timeupdate" :enable-progress-gesture="false">
			<text v-show="!play" class="icon-play iconfont icon-bofang"></text>
			</video>
	</view>
</template>

<script>
	import t from '../common/helper.js';
	var timer = null;
	export default {
		name: "VideoPlayer",
		data() {	
			return {
				ip: t.o,
				video: '',
				play: false,
				dbClick: true,
				autoplay: false,
				time: '',
			};
		},
		props: {
			videoitem: {
				type: Object,
				default: '',
			},
			videoindex: {
				type: Number,
				default: 0,
			},
			clickpage: {
				type: Number,
				default: 0,
			}
		},
		created() {
			this.video = uni.createVideoContext('myvideo', this);
		},
		methods: {
			clicker() {
				clearTimeout(timer);
				this.dbClick = !this.dbClick;
				timer = setTimeout(() => {
					if (!this.dbClick) {
						//单击
						if (this.play) {
							this.pause();
						} else {
							this.player();
						}
						this.$emit('oClick');
					} else {
						// 双击
						this.$emit('dbClick');
					}
					this.dbClick = true;
				}, 300)
			},
			player() {
				if (!this.play) {
					this.video.play();
					this.play = true;
				}
			},
			pause() {
				if (this.play) {
					this.video.pause();
					this.play = false;
				}
			},
			seek() {
				this.video.seek(0);
			},
			timeupdate(e) {
				this.time = e.detail.currentTime;
			},
			timePlay(e) {
				this.video.seek(e.toFixed(0));
			}
		},
		mounted() {
			if(this.clickpage == this.videoindex) {
				this.autoplay = true;
				this.play = true;
			}
		},
	}
</script>

<style lang="scss">
	.video-box {
		height: 100%;
		width: 100%;

		.videoplay {
			height: 100%;
			width: 100%;
			position: relative;
			.icon-play {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				font-size: 60px;
				color: rgba(255,255,255,.5);
			}
		}
	}
</style>
